<template>
	<view class="install-container" >
	
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<!-- <uni-forms-item required label="检查地点：" name="检查点名称">
				<input maxlength="18" v-model="params['检查点名称']" placeholder="请输入检查地点" @input="binddata('检查点名称',$event.detail.value)" >
			</uni-forms-item> -->
			<uni-forms-item label="检查点类型">
				<view :class="label7 == '请选择检查点类型' ? 'color':''" class="tap" @click="handleTap('picker7')">{{label7}}</view>
				<lb-picker ref="picker7" @click="handleTap('picker7')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="pointTypeList" :dataset="{ name: 'label7' }"
				 @confirm="handleConfirm7" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item required label="检查地点：" name="检查点名称">
				<uni-combox emptyTips="暂无检查点" @input="handleInput" placeholder="请选择检查地点"  :candidates="checkPointList" v-model="params['检查点名称']"></uni-combox>
			</uni-forms-item>
			<uni-forms-item v-if="checkType === 'residential'" label="绑定类型">
				<view :class="label6 == '请选择绑定类型' ? 'color':''" class="tap" @click="handleTap('picker6')">{{label6}}</view>
				<lb-picker ref="picker6" @click="handleTap('picker6')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="bindTypeList" :dataset="{ name: 'label6' }"
				 @confirm="handleConfirm6" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item v-if="bindType === 'partition'" label="所属分区" name="分区id">
				<view :class="label5 == '请选择所属分区' ? 'color':''" class="tap" @click="handleTap('picker5')">{{label5}}</view>
				<lb-picker ref="picker5" @click="handleTap('picker5')"  v-model="params['分区id']" mode="selector" :list="partitionList" :dataset="{ name: 'label5' }"
				 @confirm="handleConfirm5" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item v-if="bindType === 'build'" label="所属楼栋" name="楼栋号id">
				<view :class="label4 == '请选择所属楼栋' ? 'color':''" class="tap" @click="handleTap('picker4')">{{label4}}</view>
				<lb-picker ref="picker4" @click="handleTap('picker4')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="buildList" :dataset="{ name: 'label4' }"
				 @confirm="handleConfirm4" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item v-if="bindType === 'unit'" label="所属单元" name="单元号id">
				<view :class="label3 == '请选择所属单元' ? 'color':''" class="tap" @click="handleTap('picker3')">{{label3}}</view>
				<lb-picker ref="picker3" @click="handleTap('picker3')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="unitList" :dataset="{ name: 'label3' }"
				 @confirm="handleConfirm3" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item v-if="bindType === 'floor'" label="所属楼层" name="楼层号id">
				<uni-combox emptyTips="暂无楼层" @input="handleInput1" placeholder="请选择所属楼层"  :candidates="floorList" v-model="params['楼层名称']"></uni-combox>
				<!-- <view :class="label2 == '请选择所属房屋' ? 'color':''" class="tap" @click="handleTap('picker2')">{{label2}}</view>
				<lb-picker ref="picker2" @click="handleTap('picker2')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="floorList" :dataset="{ name: 'label' }"
				 @confirm="handleConfirm2" @cancel="handleCancel">
				</lb-picker> -->
			</uni-forms-item>
			<uni-forms-item v-if="bindType === 'room'" label="所属房屋" name="房屋号id">
				<uni-combox emptyTips="暂无房屋" @input="handleInput2" placeholder="请选择所属房屋"  :candidates="roomList" v-model="params['房屋名称']"></uni-combox>
				<!-- <view :class="label1 == '请选择所属房屋' ? 'color':''" class="tap" @click="handleTap('picker1')">{{label1}}</view>
				<lb-picker ref="picker1" @click="handleTap('picker1')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="roomList" :dataset="{ name: 'label' }"
				 @confirm="handleConfirm1" @cancel="handleCancel">
				</lb-picker> -->
			</uni-forms-item>
			<uni-forms-item  required label="设施类型" name="设施类型">
				<view :class="label == '请选择设施类型' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="installTypeList" :dataset="{ name: 'label' }"
				 @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item required label="设施名称" name="设施名称">
				<input maxlength="50" placeholder="请输入设施名称" v-model="params['设施名称']" @input="binddata('设施名称',$event.detail.value)">
			</uni-forms-item>
			<uni-forms-item required label="生产日期：" name="生产日期">
				<date-picker placeHolder="请填写生产日期" v-model="params['生产日期']" @input="binddata('生产日期',$event)"></date-picker>
			</uni-forms-item>
			<uni-forms-item required label="具体位置：" name="具体位置">
				<input maxlength="18" v-model="params['具体位置']" placeholder="请输入具体位置" @input="binddata('具体位置',$event.detail.value)">
			</uni-forms-item>	
			<uni-forms-item required label="核验日期：" name="核验日期">
				<date-picker placeHolder="请填写核验日期" v-model="params['核验日期']" @input="binddata('核验日期',$event)"></date-picker>
			</uni-forms-item>
			<uni-forms-item required name="设施状态" label="设施状态：">
				<uni-data-checkbox v-model="params['设施状态']" :localdata="status"></uni-data-checkbox>
			</uni-forms-item>
			<button class="grid-btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			LbPicker,
			DatePicker 
		},
		data() {
			return {
				pointTypeList: this.$type.pointTypeList,
				validate: false,
				bindType: null,
				checkType: null,
				bindTypeList: this.$type.bindTypeList,
				list: [],
				floors: [],
				rooms: [],
				checkPointList: [],
				partitionList: [],
				buildList: [],
				unitList: [],
				floorList: [],
				roomList: [],
				label: '请选择设施类型',
				label3: '请选择所属单元',
				label4: '请选择所属楼栋',
				label5: '请选择所属分区',
				label6: '请选择绑定类型',
				label7: '请选择检查点类型',
				installTypeList: this.$type.installTypeList,
				params: {
					检查点id	: null,
					检查点名称: '',
					设施类型	: null,
					设施名称	: null,
					生产日期	: null,
					具体位置	: null,
					核验日期	: null,
					设施状态: null,
					分区id: null,
					楼栋号id: null,
					单元号id: null,
					楼层号id: null,
					楼层名称: null,
					房屋号id: null,
					房屋名称: null
				},
				params1: {
					所属网格id: null,
					检查点名称: null
				},
				params2: {
					网格id: null,
					检查点id: null
				},
				status: [{
						text: '正常',
						value: '1'
					},
					{
						text: '异常',
						value: '2'
					}
				],
				//表单验证规则
				rules: {
					设施类型: {
						rules: [{
							required: true,
							errorMessage: '请填写设施类型',
						}]
					},
					设施名称: {
						rules: [{
							required: true,
							errorMessage: '请填写设施名称',
						}]
					},
					检查点名称: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if (this.params.检查点id) {									
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择检查点')
								}
							}
						}]
					},
					具体位置: {
						rules: [{
							required: true,
							errorMessage: '请填写具体位置',
						}]
					},
					生产日期: {
						rules: [{
							required: true,
							errorMessage: '请填写生产日期',
						}]
					},
					核验日期: {
						rules: [{
							required: true,
							errorMessage: '请填写核验日期',
						}]
					},
					设施状态: {
						rules: [{
							required: true,
							errorMessage: '请填写设施状态',
						}]
					},
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			console.log(options)
			this.params.检查点名称 = options.name
			this.params1.所属网格id = uni.getStorageSync('gridInfo').所属网格id
			// this.getCheckPointList()
		},
		onShow() {

		},
		methods: {
			binddata(name,value){
			   // 通过 input 事件设置表单指定 name 的值
			   this.$refs.form.setValue(name, value)
			},
			handleInput(event) {
				// console.log(event)
				const index = this.list.findIndex(item => item.检查点名称 === event)
				if(index > -1) {
					this.params.检查点id = this.list[index].id
					this.binddata('检查点名称', event)
					this.params.具体位置 = this.list[index].地址
					this.checkType = this.list[index].检查点类型
				}else {
					this.params.检查点id = null
					this.binddata('检查点名称', event)
					// this.validate = false
				}
			},
			handleInput1(event) {
				console.log(event)
				const index = this.floors.findIndex(item => item.楼层名称 === event)
				if(index > -1) {
					this.params.楼层号id = this.list[index].id
					this.params.具体位置 = this.params.检查点名称 + this.floors[index].楼层名称
				}else {
					
				}
			},
			handleInput2(event) {
				console.log(event)
				const index = this.rooms.findIndex(item => item.房屋名称 === event)
				if(index > -1) {
					this.params.房屋号id = this.rooms[index].id
					this.params.具体位置 = this.params.检查点名称 + this.rooms[index].房屋名称
				}
			},
			getPartitionList() {
				this.params1.检查点id = this.params.检查点id
				this.$http.post('gridSystem/partition/list', this.params1).then(res => {
					if(res.code === 10000){
						console.log(res)
						if(res.data.list !== null) {
							res.data.list.forEach(item => {
								if(!item.分区名称.includes('区')) {
									item.分区名称 = item.分区名称 + '区'
								}
								item.value = item.分区名称
								item.label = item.分区名称
							})
						}
						this.partitionList = res.data.list
					}
				})
			},
			getBuildList() {
				this.$http.post('gridSystem/building/list', this.params1).then(res => {
					if(res.code === 10000){
						console.log(res)
						if(res.data.list !== null) {
							this.$common.buildList(res.data.list)
						}
						this.buildList = res.data.list
					}
				})
			},
			getUnitList() {
				this.$http.post('gridSystem/unit/list', this.params1).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if(res.data.list !== null) {
							this.$common.unitList(res.data.list)
						}
						this.unitList = res.data.list
					}
				})
			},
			getFloorList() {
				this.$http.post('gridSystem/floor/list', this.params1).then(res => {
					console.log(res, '楼层')
					if (res.code === 10000) {
						if(res.data.list !== null) {
							this.$common.transformFloor(res.data.list)
						}
						this.floors = res.data.list
						this.floorList = res.data.list && res.data.list.map(item => item.楼层名称)
					}
				})
			},
			getRoomList() {
				this.$http.post('gridSystem/room/list', this.params1).then(res => {
					console.log(res, '房屋')
					if(res.data.list !== null) {
						this.$common.transformRoom(res.data.list)
						res.data.list.forEach(item => {
							if(item.分区号 !== '' && !item.分区号.includes('区')) {
								item.分区号 = item.分区号 + '区'
							}
							if(!item.楼栋号.includes('栋')) {
								item.楼栋号 = item.楼栋号 + '栋'
							}
							if(item.单元号 !== '' && !item.单元号.includes('单元')) {
								item.单元号 = item.单元号 + '单元'
							}
							item.房屋名称 = item.分区号 + item.楼栋号 + item.单元号 + item.房屋号
							// item.label = item.分区号 + item.楼栋号 + item.单元号 + item.房屋号
						})
					}
					this.rooms = res.data.list
					this.roomList = res.data.list && res.data.list.map(item => item.房屋名称)
				})
			},
			getCheckPointList() {
				this.$http.post('gridSystem/checkPoint/list', this.params1).then(res => {
					console.log(res,'检查点')
					if(res.code === 10000){
						this.checkPointList = res.data.list && res.data.list.map(item => item.检查点名称)
						this.list = res.data.list
						// this.checkPointList = res.data.list
					}
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.设施类型 = e.item.id
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			// 单元
			handleConfirm3(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.单元号id = e.item.单元id
					this.params.具体位置 = this.params.检查点名称 + e.item.label
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			// 楼栋
			handleConfirm4(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.楼栋号id = e.item.楼栋id
					this.params.具体位置 = this.params.检查点名称 + e.item.label
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			// 分区
			handleConfirm5(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.分区id = e.item.分区id
					this.params.具体位置 = this.params.检查点名称 + e.item.label
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			// 绑定类型
			handleConfirm6(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.bindType = e.item.id
					this.getPartitionList()
					this.getBuildList()
					this.getUnitList()
					this.getFloorList()
					this.getRoomList()
					// this.params.设施类型 = e.item.id
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			// 检查点类型
			handleConfirm7(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params1.检查点类型 = e.item.id
					this.getCheckPointList()
					// this.params.分区id = e.item.分区id
					// this.params.具体位置 = this.params.检查点名称 + e.item.label
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					res.生产日期 = dayjs(this.params.生产日期).format('YYYY-MM-DDTHH:mm:ssZ')
					res.核验日期 = dayjs(this.params.核验日期).format('YYYY-MM-DDTHH:mm:ssZ')
					if(res.生产日期 && res.核验日期) {
						let startTime = new Date(dayjs(res.生产日期).format('YYYY-MM-DD')).getTime()
						let endTime = new Date(dayjs(res.核验日期).format('YYYY-MM-DD')).getTime()
						if(startTime - endTime > 0) {
							uni.showToast({
								title: '核验日期不得早于生产日期',
								icon: 'none'
							})
							return
						}
					}
					res.检查点id = +this.params.检查点id
					res.分区id = +this.params.分区id
					res.楼栋号id = +this.params.楼栋号id
					res.单元号id = +this.params.单元号id
					res.楼层号id = +this.params.楼层号id
					res.房屋号id = +this.params.房屋号id
					console.log('表单数据信息：', res);
					this.addInstall(res)
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},	
			addInstall(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/device/add', params).then(res => {
					console.log(res)
					if(res.code === 10000){
						// uni.navigateBack({
						// 	delta: 1
						// })
						uni.redirectTo({
							url: '/fireGridCheck/acceptSuccess/acceptSuccess?path=../addInstallation/addInstallation' + '&title=继续新增设施'
						})
						// uni.showToast({
						// 	title: '添加成功'
						// })
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.install-container {
		height: 100vh;
		background-color: #F8F8F8;
		// padding-bottom: 100rpx;
	}
	.color {
		color: #808080;
	}
	.tap {
		display: flex;
		align-items: center;
	}
</style>
